<template lang="html">
  <div id="gamer"></div>
</template>

<script>
export default {
  name: 'Gamer',
  mounted() {
    const bodyElement = document.getElementsByTagName('body')[0];
    bodyElement.onkeydown = this.move;
  },
  methods: {
    move(evt) {
      const gamerElement = document.getElementById('gamer');
      const gamerStyleLeft = parseInt(window.getComputedStyle(gamerElement, null).getPropertyValue('left'));
      switch (evt.key) {
        case 'ArrowRight':
          if (gamerStyleLeft >= 380) {
            gamerElement.style.left = '380px';
          } else {
            gamerElement.style.left = gamerStyleLeft + 20 + 'px';
          }
          break;
        case 'ArrowLeft':
          if (gamerStyleLeft <= 0) {
            gamerElement.style.left = 0;
          } else {
            gamerElement.style.left = gamerStyleLeft - 20 + 'px';
          }
          break;
      }
    }
  },
}
</script>

<style lang="css" scoped>
  #gamer {
    position: absolute;
    left: 190px;
    bottom: 0;
    width: 100px;
    height: 124px;

    background-image: url('../../static/images/hero1.png');
  }
</style>
